{include file="common/head"}
<head>
<title>充值</title>
  <style type="text/css">
      #charge_img img{width:100%;border-radius: 10px;}
      #top{background: initial;border-bottom:1px solid rgba(0,0,0,0.1);max-width: 800px;color: #fff;}
      .mb-3{margin-bottom:0!important;}
      .btn{border-radius: 15px;}
  </style>    
</head>
<body style="max-width: 800px;background: #f60;">
  <div id="header"></div>
  <div id="top" class="row text-center" style="height: 50px;">
    <div class="col-2 text-center">
      <span class="bi-chevron-left" onclick="history.back()"></span>
    </div>
    <div class="col-8 text-center">{$type_name},账户余额:${$data.money}</div>
    <div class="col-2 text"></div>
  </div>
    <div style="height:30px;"></div>
    <div class="container p-5 my-2 d-grid" style="padding: 10px;">
      <input type="hidden" name="id" id="id" value="{$data.id}" />

      <div class="mb-3">
          <label for="name" class="form-label">姓名(Name):</label>
          <input type="text" class="form-control" id="name" name="name" value="{$data.name}" disabled />
      </div>
      <div class="mb-3">
          <label for="mobile" class="form-label">手机号码(Mobile):</label>
          <input type="text" class="form-control" id="mobile" name="mobile" value="{$data.mobile}" disabled />

      </div>


      <div class="mb-3" style="">
        <input type="text" class="form-control" id="type" value="{$type}" readonly style="display: none;" />
      </div>


      <div class="mb-3 ">
          <label for="money_charge" class="form-label">{$type_name}金额：</label>
          <input type="number" class="form-control" id="money_charge" name="money_charge" min="0" value="0" style="color:green;font-weight: bold;" />          
      </div>



      <div class="mb-3">
        <label for="memo" class="form-label">备注：</label>
        <input type="text" class="form-control" id="memo" name="memo" value="一般{$type_name}"   />
      </div>
      <br/>

      {if $type==1}
      <div id="charge_btn" class="btn-group">
          <button type="button" id="charge1" money="10" class="btn btn-primary">$10</button>
          <button type="button" id="charge2" money="20" class="btn btn-secondary">$20</button>
          <button type="button" id="charge3" money="50" class="btn btn-info">$50</button>
          <button type="button" id="charge4" money="100" class="btn btn-warning">$100</button>
      </div>
      {/if}
      <br/>
      <button type="button" class="btn btn-primary btn-block" id="save">提交{$type_name}</button>
      {if $type==1}
      <br/>
      <div id="charge_img" class="row">
        <div class="col"><img id="charge1_img" src="/upload/ABA.png" style="width:100%;" /></div>
        <div class="col"><img id="charge2_img" src="/upload/Wing.png" style="width:100%;" /></div>
      </div>
      {/if}
    </div>



<script type="text/javascript">
$(document).ready(function(){

  $("#charge_btn button").on('click',function(){
    var id=$(this).attr('id');
    var money=($(this).attr('money')*1).toFixed(2);
    $("#money_charge").val(money);
  })

  $("#charge_img img").on('click',function(){
    var src=$(this).attr('src');
    layer.open({
        title:'',
        content:"<img src='"+src+"' style='width:100%;';/>",
        type:1,
        closeBtn: 0, //不显示关闭按钮
        anim: 2,
        shadeClose: true, //开启遮罩关闭        
      })
  })

  $("#save").on('click',function(){
      var cid=$("#id").val();
      var money_charge = $("#money_charge").val();
      var memo = $("#memo").val();
      var type = $("#type").val();
      console.log(money_charge);

      var type_msg=(type==1)?'充值':'提现';

      if(isNaN(money_charge) || money_charge<=0) {
        layer.msg('无效的'+type_msg+'金额！');
        return false;
      }


      //询问框
      layer.confirm('本次'+type_msg+'金额：'+money_charge+'，是否确定?', {btn: ['Yes','No'],title:'Confirm' }, function(){
        $('form').submit();

        $.ajax({
          url:'/index.php/customer/charge',
          data:{'money_charge':money_charge,'type':type,'memo':memo},
          success:function(res){
            var res=JSON.parse(res);
            layer.msg(res.msg);

          }
        })
      }, function(){
        layer.msg("取消操作!");
        return 0;
      });

  })

})


</script>


</body>
</html>
